<template>
  <div>
    <p>图书ID：{{ book.id }}</p>
    <p>书名：{{ book.title }}</p>
    <p>说明：{{ book.desc }}</p>
  </div>
  <!--
  <div>图书ID：{{ $route.query.id }}</div>
  -->
</template>

<script>
import Books from '@/assets/books'
export default {
  data(){
    return {
      book: {}
    }
  },
  methods: {
    setBook(book){
      this.book = book;
    }
  },

   beforeRouteEnter (to, from, next) {
      let book = Books.find((item) => item.id == to.params.id);
      next(vm => vm.setBook(book));
    },
  /*
  created(){
    this.book = Books.find((item) => item.id == this.$route.params.id);
    this.$watch(
      () => this.$route.params,
      (toParams) => {
        this.book = Books.find((item) => item.id == toParams.id);
      },
      {
        immediate: true
      }
    )
  },*/
  beforeRouteUpdate (to) {
    this.book = null;
    this.book = Books.find((item) => item.id == to.params.id);
  }
}
</script>